<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="onAddTodo">
        </header>
        <TodoList :todos="filteredTodos" :editedTodo="editedTodo" v-model:allDone="allDone" @removeTodo="onRemoveTodo" @editTodo="onEditTodo" @doneEdit="onDoneEdit" @cancelEdit="onCancelEdit" />
        <TodoFilter :remaining="remaining" :total="todos.length" :visibility="visibility" @removeCompleted="onRemoveCompleted"/>
    </section>
</template>
<script lang="ts">
    import { computed, reactive, ref, watch, watchEffect, onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import '../../node_modules/todomvc-app-css/index.css' // 引入todo模板样式 详见 https://github.com/tastejs/todomvc-app-css
    import TodoList from '../components/TodoList.vue'
    import TodoFilter from '../components/TodoFilter.vue'
    import { useTodoState, addTodo, editTodo, doneEdit, cancelEdit, removeCompleted, removeTodo, getTodos, saveTodos } from '../utils/TodoUtils'
    export default {
        components: {
            TodoList,
            TodoFilter
        },
        setup(props, context) {
            const { todos, visibility, allDone, newTodo, editedTodo, filteredTodos, remaining } = useTodoState()
            todos.value = getTodos()
            const route = useRoute() // 可以获取当前路由对象 详见 https://github.com/vuejs/vue-router-next/issues/192
            // watchEffect(() => {
            //     visibility.value = route.params.filter
            // }) // 两种监听方式都可以 watchEffect文档 https://composition-api.vuejs.org/zh/api.html#watcheffect
            watch(() => route.params.filter, () => {
                visibility.value = route.params.filter as string
            }) // watch文档 https://composition-api.vuejs.org/zh/api.html#watch
            watch(() => allDone.value, (allDone, preAllDone) => {
                todos.value.forEach(item => item.completed = allDone)
            })
            watch(() => todos.value, (newTodos) => {
                saveTodos(newTodos)
            }, {
                deep: true // 这里deep要为true，否则todos.unshift等操作后不会触发
            })
            const onAddTodo = () => {
                addTodo(todos.value, newTodo)
            }
            const onEditedTodo = (params) => {
                editTodo(todos.value, params.id)
            }
            const onRemoveTodo = (params) => {
                removeTodo(todos.value, params.id)
            }
            const onEditTodo = (params) => {
                editTodo(todos.value, params.id)
            }
            const onDoneEdit = () => {
                doneEdit(editedTodo)
            }
            const onCancelEdit = (params) => {
                cancelEdit(todos.value, params.id, editedTodo)
            }
            const onRemoveCompleted = () => {
                removeCompleted(todos)
            }
            return {
                todos,
                visibility,
                allDone,
                newTodo,
                editedTodo,
                filteredTodos,
                remaining,
                onAddTodo,
                onEditedTodo,
                onEditTodo,
                onRemoveTodo,
                onDoneEdit,
                onCancelEdit,
                onRemoveCompleted
            }
        }
    }
</script>